<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        .zt {
            display: flex;
            justify-content: center;
        }
        
        .top {
            display: flex;
            max-width: 960px;
            height: 45px;
            /* background-color: #F4F1F1; */
            background: linear-gradient( #FFFFFF, #F4F1F1);
            justify-content: space-between;
            border-bottom: 5px solid #37ACCC;
        }
        
        .top .left {
            display: inline-flex;
            align-items: center;
        }
        
        .top .left>p {
            padding: 0 10px;
        }
        
        .top .left .color {
            width: 20px;
            height: 20px;
            background-color: skyblue;
            margin: 0 5px;
            cursor: pointer;
        }
        
        .top .left a {
            color: #505050;
            margin: 0 3px;
        }
        
        .top .right {
            display: inline-flex;
            align-items: center;
        }
        
        .top .right button {
            margin: 0 2px;
            line-height: 30px;
            height: 30px;
            outline: none;
            padding: 0 10px;
            font-size: 12px;
            border: transparent;
            /* background: -webkit-linear-gradient(top bottom, red, blue); */
            background: -webkit-linear-gradient(#F3F9FF, #C3DEFD);
            cursor: pointer;
            border-radius: 5%;
        }
        
        .top .right button:first-child {
            background: -webkit-linear-gradient(#FEF7EF, #FBE1C5);
        }
        
        .top .left .color1 {
            background-color: #70BEE9;
            border: 2px solid #C7F0FF;
        }
        
        .top .left .color2 {
            background-color: #BAD4FE;
            border: 2px solid #E3EFFE;
        }
        
        .top .left .color3 {
            background-color: #98D134;
            border: 2px solid #C9E364;
        }
        
        .top .left .color4 {
            background-color: #AC9A7C;
            border: 2px solid #E2D5B3;
        }
        
        .top .left .color5 {
            background-color: #ED6D3D;
            border: 2px solid #FADECF;
        }
        
        .top .left .color6 {
            background-color: #8FB6A2;
            border: 2px solid #BCDACB;
        }
        /* .color1 {
            background-color: #8FB6A2;
        } */
        
        .main {
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            max-width: 899px;
            ;
            /* max-width: 960px; */
            /* height: 800px; */
            padding: 100px 0;
            margin: 0 auto;
            background: #70BEE9;
        }
        
        .main h2 {
            font-size: 22px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .main h3 {
            text-align: center;
            color: #CDCDCD;
            font-size: 12px;
            font-family: 宋体;
        }
        
        .main .content {
            width: 85%;
            margin: 0 auto;
        }
        
        .main p {
            text-indent: 2em;
            font-size: 18px;
            letter-spacing: 0.5em;
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <div class="zt">
        <nav class="top">
            <div class="left">
                <p>请选择背景颜色:</p>
                <div class="color color1 "></div>
                <div class="color color2"></div>
                <div class="color color3"></div>
                <div class="color color4"></div>
                <div class="color color5"></div>
                <div class="color color6"></div>
                <p>选择字号:</p>
                <a href="javascript:void(0);">特大</a>
                <a href="javascript:void(0);">大</a>
                <a href="javascript:void(0);">中</a>
                <a href="javascript:void(0);">小</a>
            </div>
            <div class="right">
                <button>全屏阅读</button>
                <button>评论本章</button>
                <button>返回目录</button>
                <button>+书架</button>
                <button>上一章</button>
                <button>下一章</button>
            </div>
        </nav>
    </div>

    <section class="main">
        <h2>第一章 陨落的天才</h2>
        <h3>《斗破苍穹》天蚕土豆著/本书共xxxxxx字,更新于xxxx年xx月xx日</h3>
        <div class="content">
            <p>“斗之力，三段！”</p>
            <br>
            <p>
                望着测验魔石碑上面闪亮得甚至有些刺眼的五个大字， 少年面无表情， 唇角有着一抹自嘲，紧握的手掌，因为大力，而导致略微尖锐的指甲深深的刺进了掌心之， 带来一阵阵钻心的疼痛…

            </p>
            <br>
            <p>
                “萧炎，斗之力，三段！级别：低级！”测验魔石碑之旁，一位年男，看了一眼碑上所显示出来的信息，语气漠然的将之公布了出来…
            </p>
            <br>
            <p> 年男话刚刚脱口，便是不出意外的在人头汹涌的广场上带起了一阵嘲讽的骚动。</p>
            <br>
            <p>
                “三段？嘿嘿，果然不出我所料，这个“天才”这一年又是在原地踏步！”

            </p>
        </div>

    </section>
    <script>
        window.onload = function() {

            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
                window.location.href = "./02.html"; //手机
            }
            HTMLElement.prototype.__defineGetter__("currentStyle", function() {
                return this.ownerDocument.defaultView.getComputedStyle(this, null);
            });
            let color = document.querySelectorAll('.color');
            console.log(color[1].currentStyle.backgroundColor);

            let main = document.querySelector('.main')
            console.log(main);
            for (let i = 0; i < color.length; i++) {
                color[i].onclick = function() {
                    // console.log(1);
                    console.log(color[i].currentStyle.backgroundColor);
                    main.style.backgroundColor = this.currentStyle.backgroundColor;
                }
            }
            let as = document.querySelector('.left').querySelectorAll('a');
            let p = document.querySelector('.main').querySelectorAll('p');
            for (let i = 0; i < as.length; i++) {
                as[i].setAttribute('index', i)
                as[i].onclick = function() {
                    // p.style.fontSize = "40px";
                    // p.fontSize = '120px';
                    // // console.log(p);
                    let index = this.getAttribute('index');
                    console.log(index);
                    for (let j = 0; j < p.length; j++) {
                        // p[j].style.fontSize = '40px'
                        if (index == 0) {
                            p[j].style.fontSize = '3em'
                        } else if (index == 1) {
                            p[j].style.fontSize = '2em'

                        } else if (index == 2) {
                            p[j].style.fontSize = '1.5em'

                        } else if (index == 3) {
                            p[j].style.fontSize = '0.6em'

                        }

                    }
                }
            }
        };
    </script>
</body>

</html>